<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="container" style="width: 100%;height: 100%;"></div>
</body>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script>
    var hotPoints = [
        {
            position: {
                x: 0,
                y: 0,
                z: -0.2
            },
            detail: {
                "title": "信息点1"
            }
        },
        {
            position: {
                x: -0.2,
                y: -0.05,
                z: 0.2
            },
            detail: {
                "title": "信息点2"
            }
        }
    ];

    var scene, camera, renderer;


    function initThree() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100);
        camera.position.set(0, 0, 0.01);

        renderer = new THREE.WebGLRenderer();
        renderer.setSize(document.body.clientWidth, document.body.clientHeight);

        document.getElementById("container").appendChild(renderer.domElement);

        var controls = new THREE.OrbitControls(camera, renderer.domElement);

        // useSphere();
        useBox();


        loop();
    }

    function useBox() {
        var materials = [];

        var texture_left = new THREE.TextureLoader().load('./images/1.jpg');
        materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));

        var texture_right = new THREE.TextureLoader().load('./images/2.jpg');
        materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));

        var texture_top = new THREE.TextureLoader().load('./images/3.jpg');
        materials.push(new THREE.MeshBasicMaterial({ map: texture_top }));

        var texture_bottom = new THREE.TextureLoader().load('./images/4.jpg');
        materials.push(new THREE.MeshBasicMaterial({ map: texture_bottom }));

        var texture_front = new THREE.TextureLoader().load('./images/5.jpg');
        materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));

        var texture_back = new THREE.TextureLoader().load('./images/6.jpg');
        materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));

        var box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), materials);
        box.geometry.scale(1, 1, -1);
        scene.add(box);
    }

    function useSphere() {
        var sphereGeometry = new THREE.SphereGeometry(1, 50, 50);
        sphereGeometry.scale(1, 1, -1);
        // sphereGeometry.rotateY(180*Math.PI/180);

        var texture = new THREE.TextureLoader().load('./images/6.jpeg');
        var sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });

        // var sphereGeometry = new THREE.SphereGeometry(50, 20, 20);

        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        // sphere.material.wireframe  = true;
        scene.add(sphere);
    }

    function loop() {
        requestAnimationFrame(loop);

        renderer.render(scene, camera);
    }

    window.onload = initThree;
</script>

</html>